import React, { useEffect,useState } from 'react'
import { View,Text,Image, Button } from '@tarojs/components'
import {format} from '@/utils/Tools.js'
import Taro from '@tarojs/taro'

import './index.less'

export default function wholeOrderDetail() {
  const tabsList = ['待确认','已确认','已购票','未购票']
  const [filters,setFilters] = useState({
    pageNo:1,
    pageSize:5
  })
  const [list,setList] = useState([])
  const [isActive,setisActive] = useState()
  const [totalCount, settotalCount] = useState(0)
  const [waitApplicationCount, setwaitApplicationCount] = useState(0)

  useEffect(()=>{
    const {router} = Taro.getCurrentInstance()
    setisActive(router.params?.status || 0)
  },[])
  useEffect(()=>{
    if(isActive>=0){
      loadListData()
    }
  },[isActive])

  function loadListData(e,func){
    const {router} = Taro.getCurrentInstance()
    Taro.showLoading({
      title:'加载中...'
    })
    let data = {
      orderId:router.params?.orderId,
      pageNo:filters.pageNo,
      pageSize:filters.pageSize,
      status:(isActive*1)+1,
      ...e
    }
    Taro.$get(`/marketing/app/package/getReceiveList`,data,'1').then(res=>{
      if (res.code === '1'){
        let content = res.content;
        settotalCount(content.totalCount)
        setwaitApplicationCount(content.waitApplicationCount)
        let dataList = content.page.records
        dataList.map(n=>{
          n.applyObject = JSON.parse(n.applyObject)
          n.applyTime = format(new Date(n.applyTime),'YYYY-MM-DD HH:mm:ss')
        })
        setFilters({...data,total:content.page.total})
        if(func){
          func()
          return;
        }
        setList(dataList)
      }
    })
  }

  function execReq(receiveId,status){
    Taro.showLoading({
      title:'提交中...'
    })
    Taro.$post(`/marketing/app/package/applyReview`,{receiveId,status},1,{'content-type':'application/x-www-form-urlencoded'}).then(res => {
      if (res.code === '1') {
        Taro.$toast(status==0?'已忽略':'已发放')
        loadListData({pageNo:1})
      }
    })
  }

  const batchExecReq = async (status)=>{
    // 如果没有数据就不调用接口
    if (list.length <= 0) {
      return;
    }
    Taro.showLoading({
      title:'提交中...'
    })
    if (status == 2) {
      if (list && list.length > 0) {
        for (let i = 0; i < 3 && i < list.length; i++) {
          await Taro.$post(`/marketing/app/package/applyReview`,{receiveId:list[i].id,status},1,{'content-type':'application/x-www-form-urlencoded'})
        }
        Taro.$toast('已发放前三个')
        loadListData({pageNo:1})
      }
    } else {
      Taro.$post(`/marketing/app/package/applyAllReview`,{orderId:Taro.getCurrentInstance().router.params.orderId,status},1,{'content-type':'application/x-www-form-urlencoded'}).then(res => {
        if (res.code === '1') {
          Taro.$toast(status==0?'已忽略':'已发放')
          loadListData({pageNo:1})
        }
      })
    }
  }

  return (
    <View>
      <View class="head_con">
        <View class="navTitle" >
          {tabsList.map((item,index)=>{
            return <View class={`navItem ${isActive == index?'active':'not-active'}`} key={item} onClick={()=>{setisActive(index)}}>
            {item}
            {/* <Text style="font-size: 20rpx; color:#96989A ; padding-left: 2px;display: inline-block; font-weight: 400;">({item.total})</Text> */}
          </View>
          })}
        </View>
        <View class="data_warn"><Text style="color:#F65F25;font-size: 24rpx;font-weight: 400;">当前套餐共{totalCount}张观影券，还有{waitApplicationCount}张未领取哦</Text></View>
      </View>
      <View id="page_container">
        <View class="data_body">
          {list.length?list.map((node,i)=>{
            return <View key={node.id} style="width: 100%; border-radius: 8px; margin-top: 16rpx; background-color: #FFFFFF; ">
              <View style="display: flex; width: 100%; ">
                <Image style="width: 112rpx; height: 111rpx; border-radius: 50%; margin: 24rpx;" src={node.applyObject.avatar}></Image>
                <View>
                  <View style="color: #26282A; font-weight: 700; font-size: 32rpx; padding-top: 24rpx;">
                    { node.applyObject.nickName }
                  </View>
                  <View style="padding-top: 24rpx;">
                    <Text style="color: #26282A; font-size: 28rpx; font-weight: 400;">申请口令:</Text>
                    <Text style="color: #26282A; font-size: 28rpx; font-weight: 400; margin-top: 30rpx;">{node.applyContent}</Text>
                  </View>
                </View>
              </View>
              <View style="width: calc(100% - 48rpx); margin:0 auto; height: 1rpx; background-color: #E6E8EA;"></View>
              <View style="display: flex; width: 100%; padding-left: 24rpx; margin-top: 24rpx;padding-bottom: 24rpx; align-items: center; justify-content: space-between;">
                <Text style="color: #66686A; font-size: 24rpx; font-weight: 400;">申请时间：{node.applyTime}</Text>
                <View style="display: flex; margin-right: 48rpx;">
                  {node.receiveStatus==1?<>
                  <Button style="border-radius: 16px; width: 120rpx; height: 56rpx; font-size: 24rpx; border: 1px solid #E6E8EA; line-height: 52rpx;" class="gray_btn" onClick={()=>{execReq(node.id,0)}}>忽略</Button>
                  <Button style="border-radius: 16px; width: 120rpx; height: 56rpx; font-size: 24rpx; border: 1px solid #FF0D49; color: #FF0D49; margin-left: 12rpx; line-height: 52rpx;" onClick={()=>{execReq(node.id,2)}}>发放</Button>
                  </>:null}
                </View>
              </View>
              {node.receiveStatus==3?<Image style="position: relative; top: -325rpx; right: -295rpx;" class="purch_img" mode="center" src='https://taihu-finesdk.oss-cn-beijing.aliyuncs.com/fine-event/20240506/placard/purch.png'></Image>:null}
            </View>
            }):<View style="background-color: #f6f8fa; margin-top: 40rpx;">
            <Image style="margin: auto;width: 100%; margin: 24rpx;" src='https://taihu-finesdk.oss-cn-beijing.aliyuncs.com/fine-event/20240506/placard/empty.png' mode="center"></Image>
            <View style="margin: 50rpx;text-align: center;"><Text style="color:#96989A;font-size: 28rpx; font-weight: 400;">还没有{tabsList[isActive]}的哦</Text></View>
            <View style="margin: auto;width: 100%;" >
              <Button style="width: 208rpx;margin: auto;border: .1em solid #C6C8CA;border-radius:20px;color:#FF0D49;height:60rpx;line-height: 60rpx; font-size: 28rpx;" onClick={()=>{loadListData({pageNo:1})}}>刷新页面</Button>
            </View>
          </View>}
        </View>
      </View>
      {isActive==0?
      <View class="footer">
        <View style="padding: 16rpx 24rpx 0rpx 24rpx; display: flex; justify-content: space-between; ">
          <View onClick={()=>{batchExecReq(0)}} style="width: 336rpx; height: 88rpx; border-radius: 32px; border: 1px solid #E6E8EA; display: flex; justify-content: center; align-items: center; color: #1D2129; font-size: 32rpx; font-weight: 700;">
            全部忽略
          </View>
          <View onClick={()=>{batchExecReq(2)}} style="width: 336rpx; height: 88rpx; border-radius: 32px; border: 1px solid #FF0D49;background-color: #FF0D49; display: flex; justify-content: center; align-items: center; flex-direction: column;">
            <View style="font-size: 32rpx; font-weight: 700; color: #ffffff;">一键发放</View>
            <View style="font-size: 24rpx; font-weight: 400; color: #ffffff;">点击发放前3名</View>
          </View>
          
        </View>
      </View>:null}
    </View>
  )
}
